<template>
  <div id="profile">
    <h1>这里是 我的 页面</h1>
    <h2>{{message | toFixed}}</h2>
    <button @click="isShow = !isShow">按钮</button>
    <transition name="fide1">
      <div v-show="isShow" id="box"></div>
    </transition>
    <transition name="fide2">
      <div v-show="isShow" id="box1"></div>
    </transition>
    <transition name="fide3">
      <div v-show="isShow" id="box3"></div>
    </transition>

    <ul>
      <transition-group name="fade">
        <li v-for="(item,index) in list" :key="index">
          {{item}}
        </li>    
      </transition-group>
    </ul>

    <button @click="add1">添加</button>
  </div>
</template>

<script>
import {mixin1 , mixin2} from '../utils/mixins'
export default {
  name:"Profile",
  data(){
    return{
      isShow:true,
      list:['1','2','3']
    }
  },
  mixins:[mixin1,mixin2],
  mounted() {
    this.add(10,12)
    this.isShow = !this.isShow
  },
  methods:{
    add1(){
      this.list.push('4')
    }
  }
}
</script>

<style scoped>
#box{
  width: 100px;
  height: 100px;
  background: red;
}
.fide1-enter-active,.fide1-leave-active,
.fide2-enter-active,.fide2-leave-active{
  transition: all 3s;
}
.fide1-enter,.fide1-leave-to{
  opacity: 0;
  transform: translateX(100px);
}
.fide2-enter,.fide2-leave-to{
  opacity: 0;
  transform: translateY(100px);
}
#box1{
  width: 100px;
  height: 100px;
  background: green;
}
#box3{
  width: 100px;
  height: 100px;
  background: yellowgreen;
}
@keyframes ani{
  0%{
    opacity: 0;
    background: yellowgreen;
    transform: translateX(100px);
  }
  100%{
    opacity: 1;
    background: orangered;
    transform: translateX(0px);
  }
}
.fide3-enter-active{
  animation: ani 3s ;
}
.fide3-leave-active{
  animation: ani 3s reverse;
}

.fade-enter-active,.fade-leave-active{
  transition: all 2s;
}
.fade-enter,.fade-leave-to{
  opacity: 0;
  transform: translateY(100px);
}
</style>